import React, { useRef, useEffect } from 'react'
import { Modal, Form, Input, Select, Cascader, message, Radio } from 'antd'
import { getProvinceCityTree } from '@js/area'
import { awaitWrap } from '@js/tool'
import { addRequest, getRequest, updateRequest } from './ajax'
import { clanList, politicalList } from '@src/assets/js/config'

const areas = getProvinceCityTree()
const { Item } = Form
const { Option } = Select
const keys = ['name', 'gender', 'country', 'province', 'city', 'address', 'nation', 'political', 'structure', 'structure_post', 'occupation', 'foreign_case_in']

async function getHandle (id, formRef) {
  const c = formRef.current
  const h = message.loading('加载中')
  const [e, d] = await awaitWrap(getRequest(id))
  h()
  if (e === null && d !== null) {
    if (d.province && d.city) {
      d.area = [d.province, d.city]
    }
    d.foreign_case_in = d.foreign_case_in === 1 ? '是' : '否'
    c.setFieldsValue(d)
  }
}

async function submitHandle (form, callback) {
  const hide = message.loading('提交中', 120)
  let fn = addRequest
  if (form.id) {
    fn = updateRequest
  }

  if (form.area instanceof Array && form.area.length === 2) {
    form.province = form.area[0]
    form.city = form.area[1]
  }
  form.foreign_case_in = form.foreign_case_in === '是' ? 1 : 0
  delete form.area
  keys.forEach(k => {
    if (!form[k]) {
      form[k] = null
    }
  })
  const [e] = await awaitWrap(fn(form))
  hide()
  if (e === null) {
    callback()
  }
}

function Main ({ visible, data, types, countryList, hide = () => {}, refreshFn = () => {} }) {
  const formRef = useRef(null)

  useEffect(() => {
    const c = formRef.current
    if (c) {
      if (visible) {
        if (data) {
          getHandle(data.id, formRef)
        }
      } else {
        c.resetFields()
      }
    }
  }, [visible, data, formRef])
  return (
    <Modal width='600px' open={visible} title={`${data ? '编辑专家' : '新增专家'}`} onCancel={() => { hide() }} onOk={() => formRef.current.submit()}>
      <Form ref={formRef} labelCol={{ flex: '140px' }} onFinish={(d) => { submitHandle(d, () => { refreshFn(); hide() }) }}>
        <Item name='id' noStyle><span /></Item>
        <Item label='姓名' name='name' rules={[{ required: true, message: '姓名不能为空' }]}>
          <Input placeholder='请输入' allowClear />
        </Item>
        <Item label='性别' name='gender'>
          <Radio.Group options={['男', '女']} />
        </Item>
        <Item label='职业分类' name='occupation'>
          <Select placeholder='请选择' options={types} allowClear />
        </Item>
        <Item label='国家地区' name='country'>
          <Select options={countryList} placeholder='请选择' allowClear />
        </Item>
        <Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.country !== currentValues.country}>
          {
            ({ getFieldValue }) => {
              if (getFieldValue('country') === '中国') {
                return (
                  <>
                    <Item label='省市' name='area'>
                      <Cascader options={areas} placeholder='请选择' />
                    </Item>
                    <Item label='民族' name='nation'>
                      <Select placeholder='请选择' showSearch allowClear>
                        {clanList.map((li, i) => {
                          return (
                            <Option key={i} value={li}>{li}</Option>
                          )
                        })}
                      </Select>
                    </Item>
                  </>
                )
              }
              return <span />
            }
          }
        </Item>
        <Item label='联系地址' name='address'>
          <Input placeholder='请输入' allowClear />
        </Item>
        <Item label='政治面貌' name='political'>
          <Select placeholder='请选择' allowClear>
            {politicalList.map((li, i) => {
              return (
                <Option key={i} value={li}>{li}</Option>
              )
            })}
          </Select>
        </Item>
        <Item label='所在单位' name='structure'>
          <Input placeholder='请输入' allowClear />
        </Item>
        <Item label='单位职务' name='structure_post'>
          <Input placeholder='请输入' allowClear />
        </Item>
        <Item label='是否擅长涉外案件' name='foreign_case_in'>
          <Radio.Group options={['是', '否']} />
        </Item>
      </Form>
    </Modal>
  )
}

export default Main
